// ======================= 定义查询参数 =======================
// 发请求 由于参数较多 每次ajax请求都需要带上这些参数 很繁琐
// 处理
// 把参数放到一个对象 方便复用
const query = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, // 是	int	每页显示多少条数据
    cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
    state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
}

// 语法：  axios.get(url,config) //config是配置对象 里面可以通过params 来带参数
getList()

function getList() {
    axios.get('/my/article/list', {
            params: query
        })
        .then(({
            data
        }) => {
            const str = data.data.map(({
                Id,
                cate_name,
                pub_date,
                state,
                title,
            }) => `
    <tr>
            <td>${title}</td>
            <td>${cate_name}</td>
            <td>${pub_date}</td>
            <td>${state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id='${Id}'>编辑</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id='${Id}'>删除</button>
            </td>
          </tr>
    `).join('')
            $('#list').html(str)
            renderPage(data.total)
        })
}


// todo=====================获取列表分类==>填充到分类的下拉框====================
const form = layui.form

axios.get('/my/article/cates')
    .then(res => {
        // console.log(res)
        // 需要把option 的value值设置为对应得Id
        const str = res.data.data.map((res) => `
    <option value="${res.Id}">${res.name}</option>
    `).join('')
        //把option内容放到下拉框中 html() 方法可以使用 但会覆盖原有内容 建议使用 append 
        $('#cateSelect').append(str)

        form.render('select'); //刷新select选择框渲染

    })


const laypage = layui.laypage;

function renderPage(total) {
    laypage.render({
        elem: 'page-box',
        count: total, //数据总数 从服务端得到
        curr: query.pagenum, //当前第几页 （会决定第几个按钮是高亮）
        limit: query.pagesize, //每页显示的条数
        limits: [2, 4, 6, 8], //下拉框的每一项结果
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            // jump的触发时机
            // 分页渲染
            // 分页切换
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 完成切换分页效果 ==> 核心是发ajax请求
            // !记得修改query对象 pagenum ,pagesize
            query.pagenum = obj.curr
            query.pagesize = obj.limit
            // getList() 在这写会bug （不停地发ajax请求）
            //首次不执行
            if (!first) {
                //do something
                //   if成立 说明first的值是underfined 是分页切换触发的jump
                getList()

            }
        }
    })
}

// todo ========================筛选功能===================
// 步骤
// 1.给筛选的form注册submit
// 2.阻止默认行为
// 3.修改query对象的 cate_id(分类) state(状态)
// 4.就可以发送ajax请求 获取筛选后的数据进行渲染

// 1.
$('#form').on('submit', function (e) {
    // 2.
    e.preventDefault()

    // 3.
    // 需要获取到下拉框的值 ==>val()来获取
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()

    // todo 只要是筛选了 从第一页开始
    query.pagenum = 1

    // 4.
    getList()
})



// todo==========================删除功能===========================
$('#list').on('click', '.btn_delete', function () {
    const id = $(this).attr('data-id')
    // console.log(id);
    axios.get(`/my/article/delete/${id}`)
        .then(({
            data: {
                status,
                message
            }
        }) => {
            // console.log(res)
            if (status !== 0) {
                return layer.msg(message)
            }


            if ($('.btn_delete').length === 1) {
                if (query.pagenum > 1) {
                    query.pagenum = query.pagenum - 1
                }
            }
            layer.msg(message)
            getList()
        })
})

// todo ======================更改文章=================
$('#list').on('click', '.btn_edit', function () {
    const id = $(this).attr('data-id')
    // console.log(id);
    location.href=`/article/art_edit.html?${id}`
})